<template>
<div class="app">
  <!-- 区分路由页是否需要缓存（记录滚动） -->
  <transition name="router-fade" mode="out-in" id="dsss">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
  </transition>
  <transition name="router-fade" mode="out-in" id="dsss">
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </transition>
</div>
</template>
<script>
import wx from 'weixin-js-sdk'
import { mapApiUrl, mapAK } from 'src/config/env'
import { mapState, mapMutations } from 'vuex'  // mapActions
import $ from 'jquery'
// import { cookie } from '../config/utils'
let globalLocation = {city: '全国'}
export default {
  data () {
    return {
    }
  },
  mounted () {
    // this.initData()
    if (this.I9RIA) {
      this.initData()
    }
  },
  computed: {
    ...mapState([
      'I9RIA', // 获取基本信息
      'wxJsApiConf',
      'location'
    ])
  },
  methods: {
    ...mapMutations([
      'RECORD_LOCATION' // 登陆成功后保存用户信息
    ]),
    initData () {
      if (this.wxJsApiConf) {
        // this.setLocation('')
        this.setWXFn()
      }
    },
    detectmob () { // 检测是否移动端
      if (navigator.userAgent.match(/Android/i) ||
      navigator.userAgent.match(/webOS/i) ||
      navigator.userAgent.match(/iPhone/i) ||
      navigator.userAgent.match(/iPad/i) ||
      navigator.userAgent.match(/iPod/i) ||
      navigator.userAgent.match(/BlackBerry/i) ||
      navigator.userAgent.match(/Windows Phone/i)
      ) {
        return true
      } else {
        return false
      }
    },
    setWXFn () {
      let _this = this
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: this.wxJsApiConf.wx_appId, // 必填，公众号的唯一标识
        timestamp: this.wxJsApiConf.wx_timestamp, // 必填，生成签名的时间戳
        nonceStr: this.wxJsApiConf.wx_nonceStr, // 必填，生成签名的随机串
        signature: this.wxJsApiConf.wx_signature, // 必填，签名，见附录1
        jsApiList: ['getLocation', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      })
      this.I9RIA.shareConfig = {
        title: '玩赚-碎片时间赚零花，现金iPhone免费拿',
        link: location.origin,
        imgUrl: location.origin + '/static/imgs/wi.png',
        desc: '加入玩赚，和我一起瓜分40万现金。天天领福利，日日赚零花~',
        success: function () {
          // console.log('%csuccess 分享成功', 'color:#00b304')
        },
        cancel: function () {
          // console.log('%csuccess 分享失败', 'color:#666666')
        }
      }
      if (!(this.detectmob() && navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1)) { // 方便在电脑测试时展示location 全国以获取数据
        this.setLocation()
      }
      // this.setLocation()
      wx.ready(function () {
        wx.getLocation({
          type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
          success: function (res) {
            _this.getLocation(res.latitude, res.longitude)
          },
          cancel: function (res) {
            console.log(res)
            _this.setLocation('')
          }
        })
        wx.onMenuShareAppMessage(_this.I9RIA.shareConfig)
        wx.onMenuShareTimeline(_this.I9RIA.shareConfig)
        wx.onMenuShareQQ(_this.I9RIA.shareConfig)
        wx.onMenuShareWeibo(_this.I9RIA.shareConfig)
        wx.onMenuShareQZone(_this.I9RIA.shareConfig)
      })
      wx.error(function (res) {
        console.log(res)
        _this.setLocation('')
      })
    },
    async getLocation (latitude, longitude) { // 设置地理位置
      let _this = this
      $.ajax({
        type: 'GET',
        url: `${mapApiUrl}?&ak=${mapAK}&output=json&pois=1&location=${latitude},${longitude}`,
        dataType: 'JSONP',
        success: function (data) {
          console.log(data)
          if (data.status === 0) {
            _this.setLocation(data.result.addressComponent)
          } else {
            _this.setLocation()
          }
        },
        error: function (xhr, type) {
          _this.setLocation('')
        }
      })
      // this.setLocation('')
    },
    setLocation (obj) {
      let location = obj || globalLocation
      this.RECORD_LOCATION(location)
    }
  },
  watch: {
    I9RIA (res) {
      let val = res || {}
      if (val && val.wxJsApiConf) {
        this.initData()
      }
      if (val.code === 9999) {
        this.$router.push('/404')
      }
    }
  }
}
</script>
<style>
.app-content{width:100%; padding:50px 0 0 200px;}
.weui-tabbar{z-index:999;}
.router-fade-enter-active{transition: opacity 0.3s;}
.router-fade-enter{opacity:0.6}
.router-fade-leave{opacity:0} /* 路由离开时透明度为0，防止页面闪烁 */

.weui-dialog{ text-align: center; border-radius:20px; overflow:visible;}
.weui-dialog-hd{padding: 13px 16px 5px; font-size:16px; line-height:22px; min-height:32px; font-weight:400;}
.weui-dialog-bd{padding:0 26px 36px; font-size:14px; line-height:26px; word-wrap:break-word; word-break:break-all; color:#666;}
.weui-dialog-bd a{text-decoration:underline;}
.weui-dialog-ft{position:relative; line-height:48px; font-size:18px; display:flex; border-radius:0 0 20px 20px; overflow:hidden;}
.weui-dialog-ft .modal-btn{position:relative; display:block; flex:1; text-decoration:none; border:none; color:#fff; background:#cfcfcf; -webkit-tap-highlight-color:rgba(0,0,0,0);}
.weui-dialog-ft .modal-btn:first-child:after{display:none;}
.weui-dialog-ft .modal-btn:after{content:' '; display:block; position:absolute; left:0; top:0; width:1px; bottom:0; border-left:1px solid #D5D5D6; color:#D5D5D6;transform-origin: 0 0; transform: scaleX(0.5);}
.weui-dialog-ft:after{content:' '; display:block; position:absolute; left:0; top:0; height:1px; right:0; border-top:1px solid #D5D5D6; color:#D5D5D6;transform-origin: 0 0; transform: scaleY(0.5);}
.dialogCloseBtn{position:absolute; left:50%; top:100%; margin-top:25px; margin-left:-22px; background:url(../assets/imgs/icon-close.png) no-repeat 50% 50%; width:44px; height:44px; display:block; background-size:cover;}
.modal-maks{position:fixed; z-index:1000; top:0; right:0; left:0; bottom:0; background: rgba(0, 0, 0, .4);}
.weui-dialog-ft{display:block; overflow:hidden;}
.weui-dialog-ft > *{width:50%; float:left;}
.weui-dialog-ft .full-button{width:100%;}
.weui-dialog-ft .modal-btn-primary{background:#ff602a;}
.modal-toast{position:fixed; z-index:1000; top:50%; left:10%; width:80%; text-align:center; color:#fff; transform:translate(0, -50%);}
.modal-toast .toast-info{display:inline-block; margin:0 auto; padding:5px 20px; background:rgba(0, 0, 0, .6); border-radius:5px;}
.modal-toast *{display:inline-block;}
.mod-qrcode{max-width:240px; padding-top:0; padding-bottom:10px;}
.mod-qrcode .weui-dialog-bd{padding-bottom:10px; margin-top:-10px;}
.mod-qrcode .weui-dialog-bd img{display:block;}
.mod-qrcode .weui-dialog-bd p{font-size:16px; line-height:20px;}
.reset-top{margin-top:-34px;}
</style>
